<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="utf-8" />
	<meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" />
	<title>html5</title>
	<link rel="stylesheet" href="./css/bootstrap.css" />
	<link rel="stylesheet" href="./css/bootstrap-responsive.css" />
	<style type="text/css">
		#page { height:200px; }
	</style>
	<script type="text/javascript" src="./js/jquery-1.8.2.js"></script>
	<script type="text/javascript" src="./js/bootstrap.js"></script>
</head>
<body>
<div id="page">

	<div class="navbar navbar-fixed-top">
		<div class="navbar-inner">
			<ul class="nav">
				<li class="active"><a href="#">Home</a></li>
				<li class="divider-vertical"></li>
				<li><a href="#">Link</a></li>
				<li class="divider-vertical"></li>
				<li><a href="#">Link</a></li>
				<li class="divider-vertical"></li>
			</ul>
			<form class="navbar-form pull-left">
				<input type="text" class="span2">
				<button class="btn" type="submit">Submit</button>
			</form>
			<form class="navbar-search pull-left">
				<input type="text" placeholder="Search" class="search-query">
			</form>
		</div>
	</div>


	<br />
	<br />
	<br />
	<div style="position: static;" class="navbar navbar-inverse">
		<div class="navbar-inner">
			<div class="container">
				<a data-target=".subnav-collapse" data-toggle="collapse" class="btn btn-navbar">
					<span class="icon-bar"></span>
					<span class="icon-bar"></span>
					<span class="icon-bar"></span>
				</a>
				<a href="#" class="brand">Title</a>
				<div class="nav-collapse subnav-collapse">
					<ul class="nav">
						<li class="active"><a href="#">Home</a></li>
						<li><a href="#">Link</a></li>
						<li><a href="#">Link</a></li>
						<li class="dropdown">
						<a data-toggle="dropdown" class="dropdown-toggle" href="#">Dropdown <b class="caret"></b></a>
						<ul class="dropdown-menu">
							<li><a href="#">Action</a></li>
							<li><a href="#">Another action</a></li>
							<li><a href="#">Something else here</a></li>
							<li class="divider"></li>
							<li class="nav-header">Nav header</li>
							<li><a href="#">Separated link</a></li>
							<li><a href="#">One more separated link</a></li>
						</ul>
						</li>
					</ul>
					<form action="" class="navbar-search pull-left">
						<input type="text" placeholder="Search" class="search-query span2">
					</form>
					<ul class="nav pull-right">
						<li><a href="#">Link</a></li>
						<li class="divider-vertical"></li>
						<li class="dropdown">
						<a data-toggle="dropdown" class="dropdown-toggle" href="#">Dropdown <b class="caret"></b></a>
						<ul class="dropdown-menu">
							<li><a href="#">Action</a></li>
							<li><a href="#">Another action</a></li>
							<li><a href="#">Something else here</a></li>
							<li class="divider"></li>
							<li><a href="#">Separated link</a></li>
						</ul>
						</li>
					</ul>
				</div><!-- /.nav-collapse -->
			</div>
		</div><!-- /navbar-inner -->
	</div>

	<div class="dropdown clearfix">
		<ul style="display: block; position: static; margin-bottom: 5px; *width: 180px;" aria-labelledby="dropdownMenu" role="menu" class="dropdown-menu">
			<li><a href="#" tabindex="-1">Action</a></li>
			<li><a href="#" tabindex="-1">Another action</a></li>
			<li><a href="#" tabindex="-1">Something else here</a></li>
			<li class="divider"></li>
			<li class="dropdown-submenu">
			<a href="#" tabindex="-1">More options</a>
			<ul class="dropdown-menu">
				<li><a href="#" tabindex="-1">Second level link</a></li>
				<li><a href="#" tabindex="-1">Second level link</a></li>
				<li><a href="#" tabindex="-1">Second level link</a></li>
				<li><a href="#" tabindex="-1">Second level link</a></li>
				<li><a href="#" tabindex="-1">Second level link</a></li>
			</ul>
			</li>
		</ul>
	</div>

	<div class="btn-group">
		<button class="btn">1</button>
		<button class="btn">2</button>
		<button class="btn">3</button>
	</div>

	<div style="margin: 0;" class="btn-toolbar">
		<div class="btn-group">
			<button class="btn">1</button>
			<button class="btn">2</button>
			<button class="btn">3</button>
			<button class="btn">4</button>
		</div>
		<div class="btn-group">
			<button class="btn">5</button>
			<button class="btn">6</button>
			<button class="btn">7</button>
		</div>
		<div class="btn-group">
			<button class="btn">8</button>
		</div>
	</div>

	<div class="btn-group btn-group-vertical">
		<button class="btn" type="button"><i class="icon-align-left"></i></button>
		<button class="btn" type="button"><i class="icon-align-center"></i></button>
		<button class="btn" type="button"><i class="icon-align-right"></i></button>
		<button class="btn" type="button"><i class="icon-align-justify"></i></button>
	</div>

	<div style="margin: 0;" class="btn-toolbar">
		<div class="btn-group">
			<button data-toggle="dropdown" class="btn dropdown-toggle">Action <span class="caret"></span></button>
			<ul class="dropdown-menu">
				<li><a href="#">Action</a></li>
				<li><a href="#">Another action</a></li>
				<li><a href="#">Something else here</a></li>
				<li class="divider"></li>
				<li><a href="#">Separated link</a></li>
			</ul>
		</div><!-- /btn-group -->
		<div class="btn-group">
			<button data-toggle="dropdown" class="btn btn-primary dropdown-toggle">Action <span class="caret"></span></button>
			<ul class="dropdown-menu">
				<li><a href="#">Action</a></li>
				<li><a href="#">Another action</a></li>
				<li><a href="#">Something else here</a></li>
				<li class="divider"></li>
				<li><a href="#">Separated link</a></li>
			</ul>
		</div><!-- /btn-group -->
		<div class="btn-group">
			<button data-toggle="dropdown" class="btn btn-danger dropdown-toggle">Danger <span class="caret"></span></button>
			<ul class="dropdown-menu">
				<li><a href="#">Action</a></li>
				<li><a href="#">Another action</a></li>
				<li><a href="#">Something else here</a></li>
				<li class="divider"></li>
				<li><a href="#">Separated link</a></li>
			</ul>
		</div><!-- /btn-group -->
		<div class="btn-group">
			<button data-toggle="dropdown" class="btn btn-warning dropdown-toggle">Warning <span class="caret"></span></button>
			<ul class="dropdown-menu">
				<li><a href="#">Action</a></li>
				<li><a href="#">Another action</a></li>
				<li><a href="#">Something else here</a></li>
				<li class="divider"></li>
				<li><a href="#">Separated link</a></li>
			</ul>
		</div><!-- /btn-group -->
		<div class="btn-group">
			<button data-toggle="dropdown" class="btn btn-success dropdown-toggle">Success <span class="caret"></span></button>
			<ul class="dropdown-menu">
				<li><a href="#">Action</a></li>
				<li><a href="#">Another action</a></li>
				<li><a href="#">Something else here</a></li>
				<li class="divider"></li>
				<li><a href="#">Separated link</a></li>
			</ul>
		</div><!-- /btn-group -->
		<div class="btn-group">
			<button data-toggle="dropdown" class="btn btn-info dropdown-toggle">Info <span class="caret"></span></button>
			<ul class="dropdown-menu">
				<li><a href="#">Action</a></li>
				<li><a href="#">Another action</a></li>
				<li><a href="#">Something else here</a></li>
				<li class="divider"></li>
				<li><a href="#">Separated link</a></li>
			</ul>
		</div><!-- /btn-group -->
		<div class="btn-group">
			<button data-toggle="dropdown" class="btn btn-inverse dropdown-toggle">Inverse <span class="caret"></span></button>
			<ul class="dropdown-menu">
				<li><a href="#">Action</a></li>
				<li><a href="#">Another action</a></li>
				<li><a href="#">Something else here</a></li>
				<li class="divider"></li>
				<li><a href="#">Separated link</a></li>
			</ul>
		</div><!-- /btn-group -->
	</div>
	
	<div style="margin: 0;" class="btn-toolbar">
		<div class="btn-group">
			<button data-toggle="dropdown" class="btn btn-large dropdown-toggle">Large button <span class="caret"></span></button>
			<ul class="dropdown-menu">
				<li><a href="#">Action</a></li>
				<li><a href="#">Another action</a></li>
				<li><a href="#">Something else here</a></li>
				<li class="divider"></li>
				<li><a href="#">Separated link</a></li>
			</ul>
		</div><!-- /btn-group -->
		<div class="btn-group open">
			<button data-toggle="dropdown" class="btn btn-small dropdown-toggle">Small button <span class="caret"></span></button>
			<ul class="dropdown-menu">
				<li><a href="#">Action</a></li>
				<li><a href="#">Another action</a></li>
				<li><a href="#">Something else here</a></li>
				<li class="divider"></li>
				<li><a href="#">Separated link</a></li>
			</ul>
		</div><!-- /btn-group -->
		<div class="btn-group">
			<button data-toggle="dropdown" class="btn btn-mini dropdown-toggle">Mini button <span class="caret"></span></button>
			<ul class="dropdown-menu">
				<li><a href="#">Action</a></li>
				<li><a href="#">Another action</a></li>
				<li><a href="#">Something else here</a></li>
				<li class="divider"></li>
				<li><a href="#">Separated link</a></li>
			</ul>
		</div><!-- /btn-group -->
	</div>

	<div style="margin: 0;" class="btn-toolbar">
		<div class="btn-group">
			<button class="btn">Action</button>
			<button data-toggle="dropdown" class="btn dropdown-toggle"><span class="caret"></span></button>
			<ul class="dropdown-menu">
				<li><a href="#">Action</a></li>
				<li><a href="#">Another action</a></li>
				<li><a href="#">Something else here</a></li>
				<li class="divider"></li>
				<li><a href="#">Separated link</a></li>
			</ul>
		</div><!-- /btn-group -->
		<div class="btn-group">
			<button class="btn btn-primary">Action</button>
			<button data-toggle="dropdown" class="btn btn-primary dropdown-toggle"><span class="caret"></span></button>
			<ul class="dropdown-menu">
				<li><a href="#">Action</a></li>
				<li><a href="#">Another action</a></li>
				<li><a href="#">Something else here</a></li>
				<li class="divider"></li>
				<li><a href="#">Separated link</a></li>
			</ul>
		</div><!-- /btn-group -->
		<div class="btn-group">
			<button class="btn btn-danger">Danger</button>
			<button data-toggle="dropdown" class="btn btn-danger dropdown-toggle"><span class="caret"></span></button>
			<ul class="dropdown-menu">
				<li><a href="#">Action</a></li>
				<li><a href="#">Another action</a></li>
				<li><a href="#">Something else here</a></li>
				<li class="divider"></li>
				<li><a href="#">Separated link</a></li>
			</ul>
		</div><!-- /btn-group -->
		<div class="btn-group">
			<button class="btn btn-warning">Warning</button>
			<button data-toggle="dropdown" class="btn btn-warning dropdown-toggle"><span class="caret"></span></button>
			<ul class="dropdown-menu">
				<li><a href="#">Action</a></li>
				<li><a href="#">Another action</a></li>
				<li><a href="#">Something else here</a></li>
				<li class="divider"></li>
				<li><a href="#">Separated link</a></li>
			</ul>
		</div><!-- /btn-group -->
		<div class="btn-group">
			<button class="btn btn-success">Success</button>
			<button data-toggle="dropdown" class="btn btn-success dropdown-toggle"><span class="caret"></span></button>
			<ul class="dropdown-menu">
				<li><a href="#">Action</a></li>
				<li><a href="#">Another action</a></li>
				<li><a href="#">Something else here</a></li>
				<li class="divider"></li>
				<li><a href="#">Separated link</a></li>
			</ul>
		</div><!-- /btn-group -->
		<div class="btn-group">
			<button class="btn btn-info">Info</button>
			<button data-toggle="dropdown" class="btn btn-info dropdown-toggle"><span class="caret"></span></button>
			<ul class="dropdown-menu">
				<li><a href="#">Action</a></li>
				<li><a href="#">Another action</a></li>
				<li><a href="#">Something else here</a></li>
				<li class="divider"></li>
				<li><a href="#">Separated link</a></li>
			</ul>
		</div><!-- /btn-group -->
		<div class="btn-group">
			<button class="btn btn-inverse">Inverse</button>
			<button data-toggle="dropdown" class="btn btn-inverse dropdown-toggle"><span class="caret"></span></button>
			<ul class="dropdown-menu">
				<li><a href="#">Action</a></li>
				<li><a href="#">Another action</a></li>
				<li><a href="#">Something else here</a></li>
				<li class="divider"></li>
				<li><a href="#">Separated link</a></li>
			</ul>
		</div><!-- /btn-group -->
	</div>

	<div style="margin: 0;" class="btn-toolbar">
		<div class="btn-group dropup">
			<button class="btn">Dropup</button>
			<button data-toggle="dropdown" class="btn dropdown-toggle"><span class="caret"></span></button>
			<ul class="dropdown-menu">
				<li><a href="#">Action</a></li>
				<li><a href="#">Another action</a></li>
				<li><a href="#">Something else here</a></li>
				<li class="divider"></li>
				<li><a href="#">Separated link</a></li>
			</ul>
		</div><!-- /btn-group -->
		<div class="btn-group dropup">
			<button class="btn primary">Right dropup</button>
			<button data-toggle="dropdown" class="btn primary dropdown-toggle"><span class="caret"></span></button>
			<ul class="dropdown-menu pull-right">
				<li><a href="#">Action</a></li>
				<li><a href="#">Another action</a></li>
				<li><a href="#">Something else here</a></li>
				<li class="divider"></li>
				<li><a href="#">Separated link</a></li>
			</ul>
		</div><!-- /btn-group -->
	</div>

	<div style="margin-bottom: 18px;" class="tabbable">
		<ul class="nav nav-tabs">
			<li class="active"><a data-toggle="tab" href="#tab1">Section 1</a></li>
			<li class=""><a data-toggle="tab" href="#tab2">Section 2</a></li>
			<li class=""><a data-toggle="tab" href="#tab3">Section 3</a></li>
		</ul>
		<div style="padding-bottom: 9px; border-bottom: 1px solid #ddd;" class="tab-content">
			<div id="tab1" class="tab-pane active">
				<p>I'm in Section 1.</p>
			</div>
			<div id="tab2" class="tab-pane">
				<p>Howdy, I'm in Section 2.</p>
			</div>
			<div id="tab3" class="tab-pane">
				<p>What up girl, this is Section 3.</p>
			</div>
		</div>
	</div>
	
	<div class="tabbable tabs-below">
		<div class="tab-content">
			<div id="A" class="tab-pane">
				<p>I'm in Section A.</p>
			</div>
			<div id="B" class="tab-pane">
				<p>Howdy, I'm in Section B.</p>
			</div>
			<div id="C" class="tab-pane active">
				<p>What up girl, this is Section C.</p>
			</div>
		</div>
		<ul class="nav nav-tabs">
			<li class=""><a data-toggle="tab" href="#A">Section 1</a></li>
			<li class=""><a data-toggle="tab" href="#B">Section 2</a></li>
			<li class="active"><a data-toggle="tab" href="#C">Section 3</a></li>
		</ul>
	</div>

	<div class="tabbable tabs-left">
		<ul class="nav nav-tabs">
			<li class=""><a data-toggle="tab" href="#lA">Section 1</a></li>
			<li class=""><a data-toggle="tab" href="#lB">Section 2</a></li>
			<li class="active"><a data-toggle="tab" href="#lC">Section 3</a></li>
		</ul>
		<div class="tab-content">
			<div id="lA" class="tab-pane">
				<p>I'm in Section A.</p>
			</div>
			<div id="lB" class="tab-pane">
				<p>Howdy, I'm in Section B.</p>
			</div>
			<div id="lC" class="tab-pane active">
				<p>What up girl, this is Section C.</p>
			</div>
		</div>
	</div>

	<div class="tabbable tabs-right">
		<ul class="nav nav-tabs">
			<li class=""><a data-toggle="tab" href="#rA">Section 1</a></li>
			<li class="active"><a data-toggle="tab" href="#rB">Section 2</a></li>
			<li><a data-toggle="tab" href="#rC">Section 3</a></li>
		</ul>
		<div class="tab-content">
			<div id="rA" class="tab-pane">
				<p>I'm in Section A.</p>
			</div>
			<div id="rB" class="tab-pane active">
				<p>Howdy, I'm in Section B.</p>
			</div>
			<div id="rC" class="tab-pane">
				<p>What up girl, this is Section C.</p>
			</div>
		</div>
	</div>


	<ul style="margin-bottom: 5px;" class="breadcrumb">
		<li><a href="#">Home</a> <span class="divider">/</span></li>
		<li><a href="#">Library</a> <span class="divider">/</span></li>
		<li class="active">Data</li>
	</ul>
	
	<div class="pagination">
		<ul>
			<li><a href="#">&#171;</a></li>
			<li><a href="#">1</a></li>
			<li><a href="#">2</a></li>
			<li><a href="#">3</a></li>
			<li><a href="#">4</a></li>
			<li><a href="#">5</a></li>
			<li><a href="#">&#187;</a></li>
		</ul>
	</div>

	<div class="pagination pagination-centered">
		<ul>
			<li class="disabled"><a href="#">&#171;</a></li>
			<li class="active"><a href="#">1</a></li>
			<li><a href="#">2</a></li>
			<li><a href="#">3</a></li>
			<li><a href="#">4</a></li>
			<li><a href="#">5</a></li>
			<li><a href="#">&#187;</a></li>
		</ul>
	</div>
	
	<div class="alert">
		<button data-dismiss="alert" class="close" type="button">×</button>
		<strong>Warning!</strong> Best check yo self, you're not looking too good.
	</div>

	<div class="alert alert-success">
		<button data-dismiss="alert" class="close" type="button">×</button>
		<strong>Well done!</strong> You successfully read this important alert message.
	</div>

	<div class="progress progress-striped active">
		<div style="width: 20%;" class="bar"></div>
	</div>

</div><!-- #page end -->
</body>
</html>
